<template>
	<view class="userinfo">
		<image :src="user.avatar" mode="" class="avatar"></image>
		<text class="username">{{ user.name }}</text>
	</view>
</template>

<script setup>
	import {
		computed
	} from "vue";
	// const props = defineProps(["username", "avatar"]);
	// const myname = computed(() => props.username + "@");
	// const props = defineProps({
	// 	username: {
	// 		type: String,
	// 		default: "匿名",
	// 	},
	// 	avatar: {
	// 		type: String,
	// 		default: "/static/logo.png",
	// 	},
	// });
	defineProps({
		user: {
			type: Object,
			default () {
				return {
					name: "匿名",
					avatar: "../../static/logo.png",
				};
			},
		},
	});
</script>

<style lang="scss" scoped>
	.userinfo {
		width: 100%;
		height: 200px;
		background: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}

		.username {
			padding: 10px 0;
		}
	}
</style>